<template>
  <div id="DetailPolicy">
    <el-dialog v-model="dialogVisible" width="50%" :before-close="handleClose">
      <template #header>
        <div class="title f18">数据说明</div>
      </template>
      <div v-html="resHtml"></div>
      <div class="btn-box">
        <el-button type="primary" @click="dialogVisible = false"
          >我知道了</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { getSelectPolicy } from '@/api/selectSubject/subject';
import { useStore } from 'vuex';
const store = useStore();
const resHtml = ref('');
const dialogVisible = ref(false);
const handleClose = (done) => {
  done();
};
const requestData = ref({
  pid: store.getters.user.userInfo.pid,
  eduLevel: 'ben',
});

watch(
  () => store.getters.user.userInfo,
  (newValue) => {
    if (newValue) {
      requestData.value.pid = newValue.pid || null;
      requestData.value.year = newValue.graduate_time || null;
    }
  },
);

const fetchSelectPolicy = () => {
  if (store.getters.user.provinceData.provinceCode) {
    requestData.value.pid = store.getters.user.provinceData.provinceCode;
    requestData.value.year = store.getters.user.provinceData.year;
  } else {
    requestData.value.pid = store.getters.user.userInfo.pid;
    requestData.value.year = store.getters.user.userInfo.graduate_time;
  }

  getSelectPolicy(requestData.value).then((res) => {
    if (res.data.code == 20000) {
      resHtml.value = res.data.data.content;
      dialogVisible.value = true;
    }
  });
};
const handleVisibleShow = () => {
  fetchSelectPolicy();
};
defineExpose({
  handleVisibleShow,
});
</script>

<style lang="scss" scoped>
#DetailPolicy {
  .title {
    text-align: center;
  }
  .btn-box {
    text-align: center;
  }
}
</style>
